<template>
  <a-date-picker
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    style="width: 100%"
  />
</template>

<script>
import moment from 'moment'

export default {
  name: 'JDate',
  props: {
    placeholder: {
      type: String,
      default: '',
      required: false,
    },
    value: {
      type: String,
      required: false,
    },
    dateFormat: {
      type: String,
      default: 'YYYY-MM-DD',
      required: false,
    },
    readOnly: {
      type: Boolean,
      required: false,
      default: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    showTime: {
      type: Boolean,
      required: false,
      default: false,
    },
    getCalendarContainer: {
      type: Function,
      default: (node) => node.parentNode,
    },
  },
  mounted() {
          setTimeout(() => {
    this.handleDateChange(this.momVal, this.value);
  }, 500); // 延迟 0.5 秒
  },
  data() {
    return {
      momVal: this.value ? moment(this.value, this.dateFormat) : null,
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.momVal = newValue ? moment(newValue, this.dateFormat) : null
      },
      immediate: true, // 初始化时立即执行
    },
  },
  methods: {
    handleDateChange(mom, dateStr) {
      const formattedDate = mom ? moment(dateStr).format(this.dateFormat) : null
      this.$emit('change', formattedDate)
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
}
</script>
